import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const Dashboard = () => {
  const stats = [
    { title: "总销售额", value: "¥128,560", change: "+12.5%" },
    { title: "订单数量", value: "1,248", change: "+8.3%" },
    { title: "商品数量", value: "156", change: "+2.1%" },
    { title: "用户数量", value: "3,420", change: "+5.7%" }
  ];

  // 最近一周的销售数据
  const weeklySalesData = [
    { date: "周一", sales: 12000 },
    { date: "周二", sales: 19000 },
    { date: "周三", sales: 15000 },
    { date: "周四", sales: 22000 },
    { date: "周五", sales: 18000 },
    { date: "周六", sales: 25000 },
    { date: "周日", sales: 21000 },
  ];

  const recentOrders = [
    { id: "20231001001", customer: "张三", amount: 2999, status: "已发货" },
    { id: "20231001002", customer: "李四", amount: 1899, status: "待发货" },
    { id: "20231001003", customer: "王五", amount: 899, status: "已完成" },
    { id: "20231001004", customer: "赵六", amount: 3599, status: "已取消" },
    { id: "20231001005", customer: "孙七", amount: 4299, status: "待付款" }
  ];

  return (
    <div className="p-6">
      <h1 className="text-3xl font-bold mb-8">管理仪表板</h1>
      
      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        {stats.map((stat, index) => (
          <div key={index} className="bg-white rounded-lg shadow-md p-6">
            <h3 className="text-gray-500 text-lg mb-2">{stat.title}</h3>
            <div className="flex items-end justify-between">
              <p className="text-3xl font-bold">{stat.value}</p>
              <span className="text-green-500 font-semibold">{stat.change}</span>
            </div>
          </div>
        ))}
      </div>
      
      {/* Charts and Recent Orders */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {/* Sales Chart */}
        <div className="bg-white rounded-lg shadow-md p-6">
          <h2 className="text-xl font-semibold mb-6">最近一周销售趋势</h2>
          <div className="h-80">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart
                data={weeklySalesData}
                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="date" />
                <YAxis />
                <Tooltip 
                  formatter={(value) => [`¥${value.toLocaleString()}`, '销售额']}
                  labelFormatter={(label) => `日期: ${label}`}
                />
                <Legend />
                <Line 
                  type="monotone" 
                  dataKey="sales" 
                  name="销售额" 
                  stroke="#3b82f6" 
                  activeDot={{ r: 8 }} 
                  strokeWidth={2}
                />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </div>
        
        {/* Recent Orders */}
        <div className="bg-white rounded-lg shadow-md p-6">
          <h2 className="text-xl font-semibold mb-6">最近订单</h2>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b">
                  <th className="text-left py-3 px-4">订单号</th>
                  <th className="text-left py-3 px-4">客户</th>
                  <th className="text-right py-3 px-4">金额</th>
                  <th className="text-left py-3 px-4">状态</th>
                </tr>
              </thead>
              <tbody>
                {recentOrders.map((order, index) => (
                  <tr key={index} className="border-b">
                    <td className="py-3 px-4">#{order.id}</td>
                    <td className="py-3 px-4">{order.customer}</td>
                    <td className="py-3 px-4 text-right">¥{order.amount}</td>
                    <td className="py-3 px-4">
                      <span className={`px-2 py-1 rounded text-sm ${
                        order.status === "已完成" 
                          ? "bg-green-100 text-green-800" 
                          : order.status === "已发货" 
                            ? "bg-blue-100 text-blue-800" 
                            : order.status === "待发货" 
                              ? "bg-yellow-100 text-yellow-800" 
                              : order.status === "待付款" 
                                ? "bg-gray-100 text-gray-800" 
                                : "bg-red-100 text-red-800"
                      }`}>
                        {order.status}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Dashboard;